<template>
  <div class="list">
    <div>
      <div>
        <span>年份：</span>
        <a-date-picker
          picker="year"
          v-model:value="year"
          placeholder="请选择年份"
          style="width: 240px"
        >
          <template #suffixIcon>
            <svg-icon icon-class="downArrow" :scale="0.6" />
          </template>
        </a-date-picker>
        <a-button type="primary" class="btn" @click="getSalaryListFN()"
          >查询</a-button
        >
        <a-button type="primary" class="btnPub" @click="linkPub"
          >发布工资</a-button
        >
      </div>
      <a-table
        :columns="columns"
        class="table"
        :dataSource="data"
        :pagination="false"
        :loading="rec.loading"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'sort'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'hasRelease'">
            <a-badge :color="record.hasRelease === 0 ? '#CED3D9' : '#23BF71'" />
            {{ record.hasRelease === 0 ? "否" : "是" }}
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <span
              class="oper-btn"
              @click="
                router.push(
                  '/salary/detail?id=' +
                    record.id +
                    '&wageDate=' +
                    record.wageDate +
                    '&releaseDate=' +
                    record.releaseDate +
                    '&hasRelease=' +
                    record.hasRelease
                )
              "
              >查看</span
            >
            <span
              class="oper-btn"
              v-if="record.hasRelease === 0 && record.curNode === 3"
              @click="showConfirm('是否确认发布此工资信息', 'pub', record.id)"
              >发布</span
            >
            <span
              class="oper-btn"
              v-if="!record.isRecall"
              @click="showConfirm('是否确认撤回此工资信息', 'back', record.id)"
              >撤回</span
            >
            <span
              class="oper-btn"
              @click="showConfirm('是否确认删除此工资信息', 'del', record.id)"
              >删除</span
            >
          </template>
        </template>
      </a-table>
      <a-pagination
        v-model:current="rec.pager.pageNum"
        v-model:pageSize="rec.pager.pageSize"
        show-size-changer
        show-quick-jumper
        :total="rec.pager.total"
        @change="onShowSizeChange"
        :pageSizeOptions="['10', '20', '40', '100']"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, createVNode, reactive } from "vue";
import {
  getSalaryList,
  DeleteSalary,
  ReBackSalary,
  pubSalary,
} from "@/service/modules/salary/pub";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import * as dayjs from "dayjs";
import type { Dayjs } from "dayjs";
import { Modal, message } from "ant-design-vue";
import router from "@/router";

const year = ref<Dayjs>("");
const data = ref([]);
const columns = [
  {
    title: "序号",
    dataIndex: "sort",
    key: "sort",
  },
  {
    title: "名称",
    dataIndex: "releaseName",
    key: "releaseName",
  },
  {
    title: "年月",
    dataIndex: "wageDate",
    key: "wageDate",
  },
  {
    title: "实际发送人数",
    dataIndex: "sendNum",
    key: "sendNum",
  },
  {
    title: "是否发布",
    dataIndex: "hasRelease",
    key: "hasRelease",
  },
  {
    title: "发布时间",
    dataIndex: "releaseDate",
    key: "releaseDate",
  },
  {
    title: "操作",
    dataIndex: "operation",
  },
];
const rec = reactive({
  pager: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  },
  loading: false
})
getSalaryListFN();
// 二次确认
const showConfirm = (msg: String, flag: String, id: String) => {
  let res;
  Modal.confirm({
    title: msg,
    icon: createVNode(ExclamationCircleOutlined),
    async onOk() {
      switch (flag) {
        case "del": // 删除
          res = await DeleteSalary(id);
          if (res.code === 0) {
            message.success("删除成功");
            getSalaryListFN();
          }
          break;
        case "back": // 撤回
          res = await ReBackSalary(id);
          if (res.code === 0) {
            message.success("撤回成功");
            getSalaryListFN();
          }
          break;
        case "pub": // 发布
          res = await pubSalary(id);
          if (res.code === 0) {
            message.success("发布成功");
            getSalaryListFN();
          }
          break;
      }
    },
    onCancel() {
      console.log("Cancel");
    },
  });
};
// 发布工资
const linkPub = () => {
  router.push("/salary/pubIndex");
};
// 更改页码 页条
const onShowSizeChange = (page: number, pageSize: number) => {
  console.log(111);
  rec.pager.pageNum = page;
  rec.pager.pageSize = pageSize;
  getSalaryListFN();
}

// 获取工资发布列表
async function getSalaryListFN() {
  rec.loading = true;
  const { code, rows, total } = await getSalaryList({
    ...rec.pager,
    wageDate: !year.value ? "" : dayjs(year.value).format("YYYY"),
  });
  if (code === 0) {
    rec.loading = false;
    data.value = rows;
    rec.pager.total = total;
  }
}
</script>
<style lang="less" scoped>
.list {
  background: #fff;
  height: calc(100vh - 112px);
  border-radius: 10px;
  padding: 24px;
  overflow-y: scroll;
}
.list .btn {
  margin-left: 24px;
  border-radius: 6px;
  background: #3e77fa;
  border: 1px solid #3e77fa;
}
.btnPub {
  float: right;
  border-radius: 6px;
  background: #3e77fa;
  border: 1px solid #3e77fa;
}
.table {
  margin-top: 24px;
}
.oper-btn {
  font-size: 14px;
  margin-right: 24px;
  color: #3e77fa;
  cursor: pointer;
}
.oper-btn:last-child {
  color: #ff5959;
}
/deep/ .ant-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

</style>
